<template>
  <div>
    <div class="login-body">
      <div class="login-input">
        <div style="display: flex;align-items: center"><img src="@/assets/images/head/logo.png" style="width: 40px;height: 40px" alt="">
          <h5 class="inverted-title">上海交大海洋水下工程科学研究院</h5></div>
        <div class="login-title">MES管理系统</div>
        <el-form label-width="auto" label-position="top">
          <el-form-item label=""  style="margin-top: 35px">
            <el-input v-model="username" placeholder="请输入用户名" :prefix-icon="User"
                      style="width: 400px;height: 40px;font-size: 15px"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="password" :type="passwordVisible ? 'text' : 'password'" placeholder="请输入密码"
                      :prefix-icon="Lock" @keyup.enter="doLogin"
                      style="width: 400px;height: 40px;font-size: 15px">
              <template #suffix>
                <el-icon @click="togglePasswordVisibility" :class="{ 'is-active': passwordVisible }"
                         style="cursor: pointer">
                  <View v-if="passwordVisible"/>
                  <Hide v-else/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   style="width: 400px;height: 45px;font-size: 17px;margin-top: auto;margin-bottom:40px"
                   @click="doLogin">立即登录
        </el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import axiosInstance from '@/utils/http/api';
import {ElMessage} from 'element-plus';
import {computed, onMounted, ref, defineComponent} from 'vue';
import CryptoJS from 'crypto-js';
import {
  User, Lock
} from '@element-plus/icons-vue';
import {useRoute, useRouter} from 'vue-router';

const router = useRouter();
const password = ref();
const username = ref();
const passwordVisible = ref(false);
const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
};

// 页面初始化加载数据
onMounted(() => {
  // fetchTableData();
});

// 登录
const doLogin = () => {
  if (!username.value) {
    ElMessage.error('请输入用户名');
    return false;
  }

  if (!password.value) {
    ElMessage.error('请输入密码');
    return false;
  }

  const ps = CryptoJS.MD5(password.value).toString();

  const formData = new FormData();
  formData.append('username', username.value);
  formData.append('password', password.value);
  formData.append('isWeb', '0');

  axiosInstance.post('/api/auth/user/login', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log(res.data);
    localStorage.setItem('token', res.data.token);
    localStorage.setItem('tokenUserId', res.data.id);
    localStorage.setItem('username', res.data.name);
    router.push('/home')
    // localStorage.setItem('roleRouteList', JSON.stringify(res.data.userVO.routeVOList));
    // localStorage.setItem('userVO', JSON.stringify(res.data.userVO));
    // const roleRouteListslo = res.data.userVO.routeVOList;
    // if (roleRouteListslo.length == 0) {
    //   ElMessage.error('你没有页面权限，请联系管理员添加')
    //   return false
    // }
    //   const list = [];
    //   const cListMap = new Map();
    //
    //   for (const item of roleRouteListslo) {
    //     if (item.type === 0) {
    //       item.children = [];
    //       list.push(item);
    //     } else if (item.type === 1) {
    //       // 将类型为 1 的项根据 pid 存储到 Map 中，以便快速查找
    //       if (!cListMap.has(item.pid)) {
    //         cListMap.set(item.pid, []);
    //       }
    //       cListMap.get(item.pid).push(item);
    //     }
    //   }
    //
    //   for (const item of list) {
    //     if (cListMap.has(item.id)) {
    //       item.children.push(...cListMap.get(item.id));
    //       for (const items of item.children) {
    //         items.children = [];
    //         if (cListMap.has(items.id)) {
    //           items.children.push(...cListMap.get(items.id));
    //         }
    //       }
    //     }
    //   }
    //   localStorage.setItem('roleRouteJSON', JSON.stringify(list));
    //   console.log(JSON.stringify(list), 'JSON.stringify(list)')
    //
    //   const routerData = router.options.routes.filter(item => !item.noMenu).sort((a, b) => a.sort - b.sort);
    //   let locChildren = [];
    //   let onLineChildren = [];
    //   for (let i = 0; i < routerData.length; i++) {
    //     for (let j = 0; j < list.length; j++) {
    //       if (routerData[i].path == list[j].urlPath) {
    //         locChildren = routerData[i].children;
    //         onLineChildren = list[j].children;
    //         break;
    //       }
    //     }
    //     // 如果已经找到匹配项，终止外层循环
    //     if (locChildren.length > 0 && onLineChildren.length > 0) {
    //       break;
    //     }
    //   }
    //   for (const item of locChildren) {
    //     for (const items of onLineChildren) {
    //       if (item.path == items.urlPath) {
    //         router.push(item.path)
    //         return false
    //       }
    //     }
    //   }
  }).catch(err => {
    console.log(err, 'err');
  });
};
</script>
<style scoped>
.login-header {
  height: 60px;
  display: flex;
  align-items: center;
  background-size: 100% 100%;
  background: url("@/assets/images/head/bg.png") no-repeat;
}

.login-header img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 标题文字流光效果 */
.inverted-title {
  position: relative; /* 关键：为伪元素定位提供基准 */
  display: inline-block; /* 确保伪元素能匹配文字宽度 */
  /* 保留原有文字样式 */
  font-size: 28px;
  font-family: 'YouSheBiaoTiHei', sans-serif;
  color: #0050A2; /* 保持原文字颜色 */
  padding-left: 5px;
}


.login-body {
  /*background-image: url('@/assets/images/loginBg.jpg');*/
  background: url("@/assets/images/loginBg.png") no-repeat left center;
  background-size: 100% 100%; /* 拉伸至100%宽度和高度（可能变形） */
  height: 100vh;
  width: 100%;
  padding-top: 280px;
}

.login-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  padding-top: 20px;
  border-radius: 10px;
  width: 500px;
  height: 425px;
  margin-left: auto;
  margin-right: 300px;
  border:1px solid #c9c9c9
}

.login-input .el-input {
}

.login-title {
  font-size: 28px;
  color: #010101;
  font-weight: 700;
  margin: 10px 0;
}

.login-title-bottom {
  background: #FFF;
  height: 40px;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #999;
}
</style>
